<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>

<body>
<div id="app" v-cloak>
    <!--条件查询 -->
    <%--<div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="margin-left: 16px;position: relative;">

                <el-form-item label=" ">
                    <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>--%>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="version" label="版本号" min-width="100"></el-table-column>
            <el-table-column prop="editionUrl" label="下载地址" min-width="100"></el-table-column>
            <el-table-column prop="remarks" label="备注" min-width="100"></el-table-column>
            <el-table-column prop="createTime" label="检查日期" min-width="100" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="isForces" label="检查状态" min-width="150">
                <template scope="scope">
                    <el-tag type="danger" size="small" v-if="scope.row.isForces == '0'">否</el-tag>
                    <el-tag type="success" size="small" v-if="scope.row.isForces == '1'">是</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="检查状态" min-width="150">
                <template scope="scope">
                    <el-tag type="success" size="small" v-if="scope.row.type == '1'">IOS-监管端</el-tag>
                    <el-tag type="success" size="small" v-if="scope.row.type == '2'">IOS-经营端</el-tag>
                    <el-tag type="success" size="small" v-if="scope.row.type == '3'">安卓-监管端</el-tag>
                    <el-tag type="success" size="small" v-if="scope.row.type == '4'">安卓-经营端</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- 						<el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     -->                    </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- <div style="position: absolute;left: 8px;margin: 9px 0 8px 0;">
        <el-button icon="plus" type="primary" @click="handleAdd" size="mini">新增</el-button>
    </div> -->
    <div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
        <el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
                       :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"></el-pagination>
        <el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose"
               width="700px">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" :inline="false">
            <el-form-item label="版本号" prop="version">
                <el-input v-model.trim="editForm.version" auto-complete="off" style="width: 320px;"></el-input>
            </el-form-item>
            <!-- 	<el-form-item label="下载地址" prop="editionUrl">
                    <el-input v-model.trim="editForm.editionUrl" auto-complete="off" style="width: 320px;"></el-input>
                </el-form-item> -->
            <el-form-item label="下载地址" prop="editionUrl">
                <el-input v-model.trim="editForm.editionUrl" auto-complete="off" style="width: 320px;"></el-input>
            </el-form-item>
            <el-form-item label="上传安装包" prop="editionUrl">
                <el-upload
                        class="upload-demo"
                        action="${ctx}/backstage/file/fileUpload?saveType=version"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-success="handleAvatarSuccess"
                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="请输入内容"
                          v-model="editForm.remarks"
                          style="width: 320px;"></el-input>
            </el-form-item>
            <el-form-item label="强制更新" prop="isForces">
                <el-radio-group v-model="editForm.isForces">
                    <el-radio :label="'0'">否</el-radio>
                    <el-radio :label="'1'">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="editForm.type">
                    <el-radio :label="'1'">IOS-监管端</el-radio>
                    <el-radio :label="'2'">IOS-经营端</el-radio>
                    <el-radio :label="'3'">安卓-监管端</el-radio>
                    <el-radio :label="'4'">安卓-经营端</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="dialogImageUrl.indexOf('blob:')== 0 ? dialogImageUrl : '${imgesBaseUrl}/' + dialogImageUrl" alt="">
    </el-dialog>
</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });

    var app = new Vue({
        el: '#app',
        data: {
            isMobile: '${isMobile}',
            tableH: $(window).height() - 155,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            filters: {},
            editFormVisible: false,
            regionIds: [],
            regionData: [],
            regionProps: {
                label: 'name',
                value: 'id',
                children: 'children',
                checkStrictly: true
            },
            individualData: [],
            editLoading: false,
            editFormRules: {
                individualId: [{
                    required: true,
                    message: '不能为空！'
                }],
                checkName: [{
                    required: true,
                    message: '不能为空！'
                }],
                description: [{
                    required: true,
                    message: '不能为空！'
                }],
                time: [{
                    required: true,
                    message: '不能为空！'
                }],
                imageUrl: [{
                    required: true,
                    message: '不能为空！',
                    validator: function (rule, value, callback) {
                        if (app.fileList.length == 0) {
                            callback(new Error());
                        } else {
                            callback();
                        }
                    }
                }],
                result: [{
                    required: true,
                    message: '不能为空！',
                    validator: function (rule, value, callback) {
                        if (value != '-1' && value != '1') {
                            callback(new Error());
                        } else {
                            callback();
                        }
                    }
                }]
            },
            editForm: {},
            tableData: [],
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: []
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({}, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/version/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = 0;
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleClose: function () {
                this.editLoading = false;
                this.fileList = [];
            },
            handleOpen: function () {
                if (this.$refs.editForm) {
                    this.$refs.editForm.resetFields();
                }
            },
            handleAdd: function () {
                this.editForm = {};
                this.editFormVisible = true;
            },
            handleEdit: function (index, row) {
                this.editForm = Object.assign({}, row);
                this.editFormVisible = true;
            },
            handleSave: function () {
                this.$refs['editForm'].validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            type: 'POST',
                            url: "${ctx}/backstage/version/edit",
                            data: app.editForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            },
            handleDelete: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.editLoading = true;
                    $.ajax({
                        url: "${ctx}/backstage/check/delete",
                        data: {
                            id: row.id
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadData();
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$notify.error({
                                    title: '错误',
                                    message: returndata.errors.message
                                });
                            }
                            app.editLoading = false;
                        }
                    });
                });
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                if (date.length < 10) {
                    var date = new Date(date * 1000); //如果date为10位不需要乘1000
                } else {
                    var date = new Date(date);
                }
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D;
            },
            handleRegionChange: function (val) {
                switch (val.length) {
                    case 0:
                        this.filters.districtId = '';
                        this.filters.townId = '';
                        break;
                    case 1:
                        this.filters.districtId = val[0];
                        this.filters.townId = '';
                        break;
                    case 2:
                        this.filters.districtId = val[0];
                        this.filters.townId = val[1];
                        break;
                }
            },
            handleRemove(file) {
                $.each(this.fileList, function (i, item) {
                    if (JSON.stringify(item) == JSON.stringify(file)) {
                        app.fileList.splice(i, 1);
                        return;
                    }
                });
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload: function (file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isBMP = file.type === 'image/bmp';
                const isLt5M = file.size / 1024 / 1024 < 5;
                //判断图片格式
                if (!isJPG && !isGIF && !isPNG && !isBMP) {
                    this.$message({
                        showClose: true,
                        message: '上传图片必须是JPG/GIF/PNG/BMP 格式!',
                        type: 'error'
                    });
                }
                //判断图片格式大小
                if (!isLt5M) {
                    this.$message({
                        showClose: true,
                        message: '上传图片大小不能超过 5MB!',
                        type: 'error'
                    });
                }
                return (isJPG || isBMP || isGIF || isPNG);
            },
            //图片上传成功调用函数，文件上传成功时的钩子
            handleAvatarSuccess: function (res, file, fileList) {
                if (res.success) {
                    //this.fileList.push(file);
                    app.editForm.editionUrl = res.url;
                } else {
                    app.$notify.error({
                        title: '错误',
                        message: res.errors.message
                    });
                }

            },
            beforeRemove(file, fileList) {
                return this.$confirm("确定移除 ${ file.name }？");
            },
            handlePreview(){

            },
            handleExceed(){

            }
        }
    });
</script>
